HTMLタグで文字と画像を縦スクロールさせる
先週に引き続き、今週もMARQUEEタグで自動スクロールを行う方法を紹介します。MARQUEEタグは、文字だけでなく画像を縦方向にスクロールさせる場合にも利用できます。ぜひ、試してみてください。 サンプルページ

→ MARQUEEタグで縦スクロールを実行させる
 
MARQUEEタグを使うと、左右方向だけでなく上下方向にも文字をスクロールできます。上方向へスクロールさせる場合は、direction属性に"up"を指定します。逆に、下方向へスクロールさせる場合は、direction属性に"down"を指定します。なお、上下にスクロールさせる場合は、height属性でスクロールさせる範囲を指定するのを忘れないようにしてください。
<MARQUEE width="350" height="100" direction="up" style="border:solid #FF9999 1px; padding:3px">
ようこそホームページへ。<BR>
ゆっくりと、心ゆくまで楽しんでいってください。
</MARQUEE>
サンプルページ

→ MARQUEEタグを組み合わせて上下左右にスクロール
 
2つのMARQUEEタグを組み合わせて使用すると、以下のサンプルのように跳ねるように動くスクロールを実現できます。この例では、最初のMARQUEEタグで上下に繰り返しスクロールさせ(behavior属性に"alternate"を指定)、次のMARQUEEタグで右方向へスクロールさせています。これらを組み合わせることにより、サンプルのような動きを実現することが可能となります。
<MARQUEE width="600" height="60" direction="up" behavior="alternate"
style="border:solid #FF9999 1px; padding:3px">
<MARQUEE direction="right">
ようこそホームページへ。
</MARQUEE>
</MARQUEE>
サンプルページ

→ MARQUEEタグで画像をスクロール
 
MARQUEEタグを利用して画像をスクロールさせることも可能です。その方法は、MARQUEEタグの間にIMGタグで画像を配置するだけ。写真を連続してスクロールさせるなど、ユニークな演出に活用してみてください。
<MARQUEE width="200" height="150" direction="up" bgcolor="#000000"
style="border:solid #000099 5px">
<IMG src="photo01.jpg"><BR>
<IMG src="photo02.jpg"><BR>
<IMG src="photo03.jpg"><BR>
<IMG src="photo04.jpg"><BR>
<IMG src="photo05.jpg"><BR>
<IMG src="photo06.jpg"><BR>
<IMG src="photo07.jpg"><BR>
</MARQUEE>
サンプルページ


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze